<template>
  <div class="main">
    <div style="height: 80px">
      <el-input placeholder="百度翻译APPID" v-model="appId">
        <template slot="prepend">APPID</template>
      </el-input>
    </div>
    <div style="height: 80px">
      <el-input placeholder="百度翻译密钥" type="password" v-model="password">
        <template slot="prepend">密钥</template>
      </el-input>
    </div>
    <div style="height: 80px">
      <el-select v-model="level" placeholder="请选择">
        <el-option
            v-for="item in levelList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          <span style="float: left">{{ item.label }}</span>
          <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
        </el-option>
      </el-select>
    </div>
    <div>
      <el-button type="success" @click="save">保存配置</el-button>
    </div>
  </div>
</template>

<script>

import {CONFIG} from "../../store/mutation-types";

export default {
  name: "AsideComponent",
  data() {
    return {
      appId: "",
      password: "",
      levelList: [{
        value: 1,
        label: '青铜去重'
      },{
        value: 2,
        label: '白银去重'
      },{
        value: 3,
        label: '黄金去重'
      },{
        value: 4,
        label: '钻石去重'
      }, {
        value: 5,
        label: '星耀去重'
      }, {
        value: 6,
        label: '王者去重'
      },],
      level: '1'
    }
  },
  mounted() {
    //this.$store.commit(CONFIG.LOADED_CONFIG)
    this.appId = this.$store.state.Config.appId
    this.password = this.$store.state.Config.password
    this.level = this.$store.state.Config.level
  },
  methods: {
    save() {
      this.$store.commit(CONFIG.SAVE_CONFIG, {
        appId: this.appId,
        password: this.password,
        level: this.level
      })
      this.$message('已保存');
    }
  }
}
</script>

<style scoped>
.main {
}
</style>